<template>
    <div class="main">
      <p class="main_text">定价列表</p>
        <!-- #################################### 表单 #################################### -->
        <div class="top mb20 p20">
            <el-form :model="searchData" class="df fww">
                <el-form-item label="定价列表：">
                    <el-input v-model="searchData.name" placeholder="定价列表" class="mr20" style="width: 140px;" clearable
                        @input="searchBtn" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchBtn">查询</el-button>
                    <el-button type="primary" plain @click="resetBtn">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="cyr-flex">
            <el-button type="primary" @click="addCenterDialogVisible = true"
                v-if="showFlag && roleList.write" style="width: fit-content">添加</el-button>
            <el-table :data="tableData"  class="mt20" :show-overflow-tooltip="true" v-adaptive
                border>
                <el-table-column prop="name" label="定价列表" width="180">
                    <template #default="props">
                        <el-text tag="span" style='cursor: pointer;' @click='checkDalog(props.row)'>{{ props.row.name
                            }}</el-text>
                    </template>
                </el-table-column>
                <el-table-column prop="effectiveTimeCha" label="执行时间" width="180" />
                <el-table-column prop="obsolescenceTimeCha" label="废弃时间" width="180" />
                <el-table-column label="状态" width="120" v-if="showFlag">
                    <!-- 0、正在使用1、已废弃 -->
                    <template #default="props">
                        <el-tag v-if="props.row.state == 0">启用</el-tag>
                        <el-tag v-if="props.row.state == 1" type="danger">废弃</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="确认状态" width="120" v-if="!showFlag">
                    <!-- 0、正在使用1、已废弃 -->
                    <template #default="props">
                        <el-tag v-if="props.row.checked == true">已确认</el-tag>
                        <el-tag v-if="props.row.checked == false" type="danger">未确认</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="详细说明" />
                <el-table-column label="操作" fixed="right" width="140"  :show-overflow-tooltip="false">
                    <template #default="props">
                        <el-button size="small" v-if="props.row.state != 0 && roleList.write" type="primary" link
                            @click='checkDalog(props.row)'>查看</el-button>
                        <el-button size="small" v-if="!showFlag" type="primary" link
                            @click='checkDalog(props.row)'>查看</el-button>
                        <!-- <el-button size="small" v-if="props.row.state != 1 && showFlag" type="primary" link
                            @click='editDalog(props.row)'>修改</el-button> -->
                        <el-popconfirm title="选择废弃则无法再次启用，请确认您的操作。" @confirm="obsolescenceBtn(props.row)">
                            <template #reference>
                                <el-button size="small" v-if="props.row.state != 1 && showFlag" link
                                    type="danger">废弃</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
                @change="handleCurrentChange" />
            <!-- #################################### 分页 #################################### -->
        </div>
        <!-- ****************************** 添加定价列表 ****************************** -->
        <el-dialog v-model="addCenterDialogVisible" title="添加定价列表" width="40%" align-center
            @close="closeAddCenterDialogVisible">
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">添加定价列表</p>
                </div>
            </template>
            <el-form :model="formData" ref="formDataRef" :rules="rules" label-width="7.5rem">
                <el-form-item label="定价列表：" style="width: 50%;" prop="name">
                    <el-input v-model="formData.name" placeholder="定价列表" />
                </el-form-item>
                <el-form-item label="执行时间：" style="width: 50%;" prop="effectiveTime">
                    <el-date-picker v-model="formData.effectiveTime" type="datetime" :disabled-date="disableDate"
                        :default-time="defaultTime(0, 0, 0)" value-format="YYYY-MM-DDTHH:mm:ss" />
                </el-form-item>
                <el-form-item label="废弃时间：" style="width: 50%;">
                    <el-date-picker v-model="formData.obsolescenceTime" type="datetime" :disabled-date="disableDate1"
                        :default-time="defaultTime(23, 59, 59)" value-format="YYYY-MM-DDTHH:mm:ss" />
                </el-form-item>
                <el-form-item label="详细说明：" style="width: 80%;" prop="content">
                    <el-input v-model="formData.content" type="textarea" placeholder="详细说明"
                        :autosize="{ minRows: 3, maxRows: 10 }" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addCenterDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addBtn(formDataRef)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 修改定价列表 ****************************** -->
        <el-dialog v-model="editCenterDialogVisible" title="修改定价列表" width="40%" align-center>
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">修改定价列表</p>
                </div>
            </template>
            <el-form :model="editformData" ref="editformDataRef" :rules="rules1" label-width="7.5rem">
                <el-form-item label="定价列表：" style="width: 50%;" prop="name">
                    <el-input v-model="editformData.name" placeholder="定价列表"
                        :disabled="editformData.state == 1 || !showFlag" />
                </el-form-item>
                <el-form-item label="执行时间：" style="width: 50%;" prop="effectiveTime">
                    <el-date-picker v-model="editformData.effectiveTime" type="datetime"
                        :disabled="editformData.state == 1 || !showFlag" :disabled-date="disableDate"
                        :default-time="defaultTime(0, 0, 0)" value-format="YYYY-MM-DDTHH:mm:ss" />
                </el-form-item>
                <el-form-item label="废弃时间：" style="width: 50%;">
                    <el-date-picker v-model="editformData.obsolescenceTime" type="datetime"
                        :disabled="editformData.state == 1 || !showFlag" :disabled-date="disableDate1"
                        :default-time="defaultTime(23, 59, 59)" value-format="YYYY-MM-DDTHH:mm:ss" />
                </el-form-item>
                <el-form-item label="详细说明：" style="width: 80%;" prop="content">
                    <el-input v-model="editformData.content" type="textarea" placeholder="详细说明"
                        :disabled="editformData.state == 1 || !showFlag" :autosize="{ minRows: 3, maxRows: 10 }" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editCenterDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editSaveBtn(editformDataRef)" v-if="editformData.state != 1">
                        保存
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 查看定价列表 ****************************** -->
        <el-dialog v-model="checkCenterDialogVisible" title="查看定价列表" width="40%" align-center>
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">查看定价列表</p>
                </div>
            </template>
            <div style="max-height: 600px;overflow-y: scroll;">
                <el-form :model="checkCenterDialogVisible" label-width="7.5rem">
                    <el-form-item label="定价列表：" style="width: 50%;" prop="name">
                        <el-text>{{ checkformData.name }}</el-text>
                    </el-form-item>
                    <el-form-item label="执行时间：" style="width: 50%;" prop="effectiveTime">
                        <!-- <el-date-picker v-model="checkformData.effectiveTime" type="datetime" :disabled="true"
                            :disabled-date="disableDate" :default-time="defaultTime(0, 0, 0)"
                            value-format="YYYY-MM-DDTHH:mm:ss" /> -->
                        <el-text>{{ checkformData.effectiveTime }}</el-text>
                    </el-form-item>
                    <el-form-item label="废弃时间：" style="width: 50%;">
                        <!-- <el-date-picker v-model="checkformData.obsolescenceTime" type="datetime" :disabled="true"
                            :disabled-date="disableDate" :default-time="defaultTime(23, 59, 59)"
                            value-format="YYYY-MM-DDTHH:mm:ss" /> -->
                        <el-text>{{ checkformData.obsolescenceTime == null ? '--' : checkformData.obsolescenceTime
                            }}</el-text>
                    </el-form-item>
                    <el-form-item label="详细说明：" style="width: 80%;" prop="content">
                        <el-input v-model="checkformData.content" type="textarea" placeholder="详细说明" :disabled="true"
                            :autosize="{ minRows: 3, maxRows: 10 }" />
                        <!-- <textarea style="border: none;width: 100%;height:200px;background-color: #fff;" disabled>{{
                checkformData.content }}</textarea> -->
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="pricingChangeCheck" type="primary">同意</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { RequestPricingListSave, RequestPricingListGetlistlimit, RequestPricingListObsolescent, RequestPricingListPricingChangeCheck } from "@/api/path/index.js";
import { ElMessage } from "element-plus";
import { formatTimeAll, formatTimeHan } from "@/filters/index";
import { ref } from "vue";
import { Edit } from '@element-plus/icons-vue'
import useAuthorize from "@/hooks/authorize";
let roleList = useAuthorize()
const searchData = ref<any>({
    name: "",
});
const addCenterDialogVisible = ref<any>(false)
const checkCenterDialogVisible = ref<any>(false)
const editCenterDialogVisible = ref<any>(false)
const searchBtn = () => {
    currentPage.value = 1
    getData()
};
const resetBtn = () => {
    currentPage.value = 1
    currentPage.value = 1
    searchData.value.name = ''
    getData()
};
// 时间转时间戳
const timeToTimestamp = (time: any) => {
    let timestamp = Date.parse(new Date(time).toString());
    console.log(time + "的时间戳为：" + timestamp);
    return timestamp;
}
const disableDate = (time: any) => {
    console.log('Date.now()', Date.now());
    return time.getTime() < Date.now() - 8.64e7 || time.getTime() > timeToTimestamp(formData.value.obsolescenceTime);
    // return time.getTime() < Date.now() - 8.64e7 + 7 * 24 * 60 * 60 * 1000 || time.getTime() > timeToTimestamp(formData.value.obsolescenceTime);
}
const disableDate1 = (time: any) => {
    console.log('formData.value.effectiveTime', formData.value.effectiveTime);
    return time.getTime() < timeToTimestamp(formData.value.effectiveTime);
}
const showFlag = ref<any>(JSON.parse(localStorage.getItem("roleInfo")!).company == 0 ? true : false)
const defaultTime = (H: any, M: any, S: any) => {
    var now = new Date()
    now.setHours(H);
    now.setMinutes(M);
    now.setSeconds(S);
    return now;
};
const tableData = ref<any>([
    // {
    //     定价列表: "拖车费用",
    //     详细说明:
    //         "针对拖车运费标准。以下是有关费用计算方式的详细说明：对于15公里以内的拖车运输，统一收取150元运费。若拖车运输距离超过15公里，则在15公里外的部分，将按照每公里5元的标准进行计费。例如，若您的拖车运输距离为20公里，则费用计算方式为：150元（15公里内）+ （20公里 - 15公里）* 5元 / 公里 = 175元。",
    //     执行时间: "2024/4/20",
    // },
    // {
    //     定价列表: "平台服务费",
    //     详细说明: "上架商品实现交易后，交易金额的10%进行收取",
    //     执行时间: "2024/4/29",
    // },
]);
/* ************************ 分页获取数据 ************************ */
const total = ref<any>(5);
const currentPage = ref(1);
const pageSize = ref(10);
const handleSizeChange = (val: number) => {
    getData();
};
const handleCurrentChange = (val: number) => {
    getData();
};
const getData = () => {
    RequestPricingListGetlistlimit({
        page: currentPage.value,
        name: searchData.value.name,
        rows: pageSize.value
    }).then((res: any) => {
        res.resultObj.data.forEach((item: any) => {
            item.effectiveTimeCha = formatTimeAll(item.effectiveTime)
            if (item.obsolescenceTime == null) {
                item.obsolescenceTimeCha = '--'
            } else {
                item.obsolescenceTimeCha = formatTimeAll(item.obsolescenceTime)
            }
        });
        tableData.value = res.resultObj.data
        total.value = res.resultObj.total
    })
};
getData();
const formData = ref<any>({
    name: '',
    content: '',
    effectiveTime: '',//生效时间
    obsolescenceTime: ''//废弃时间
})
const formDataRef = ref<any>()
const editformDataRef = ref<any>()
const rules = ref<any>({
    name: [
        { required: true, message: "前填写定价列表", trigger: "change" },
    ],
    content: [
        { required: true, message: "请填写详细说明", trigger: "change" },
    ],
    effectiveTime: [
        { required: true, message: "请填写生效时间", trigger: "change" },
    ],
})
const rules1 = ref<any>({
    name: [
        { required: true, message: "前填写定价列表", trigger: "change" },
    ],
    content: [
        { required: true, message: "请填写详细说明", trigger: "change" },
    ],
    effectiveTime: [
        { required: true, message: "请填写生效时间", trigger: "change" },
    ],
})
const closeAddCenterDialogVisible = () => {
    formData.value.name = '',
        formData.value.content = '',
        formData.value.effectiveTime = '',//生效时间
        formData.value.obsolescenceTime = ''//废弃时间
}
// ===============================>   添加
const addBtn = async (formEl: any) => {
    if (!formEl) return;
    await formEl.validate((valid: any) => {
        if (valid) {
            // console.log(formData.value);
            RequestPricingListSave(formData.value).then((res: any) => {
                console.log(res);
                if (res.success == true) {
                    ElMessage.success(res.msg)
                    addCenterDialogVisible.value = false
                    getData()
                }
            })
        }
    });
};
// ===============================>   废除
const obsolescenceBtn = (e: any) => {
    RequestPricingListObsolescent(e.id).then((res: any) => {
        if (res.success == true) {
            ElMessage.success(res.msg)
            getData()
        }
    })
}
// ===============================>   修改
const editformData = ref<any>({})
const editDalog = (e: any) => {
    editformData.value = e
    editCenterDialogVisible.value = true
}
const editSaveBtn = async (formEl: any) => {
    if (!formEl) return;
    await formEl.validate((valid: any) => {
        if (valid) {
            RequestPricingListSave(editformData.value).then((res: any) => {
                console.log(res);
                if (res.success == true) {
                    ElMessage.success(res.msg)
                    editCenterDialogVisible.value = false
                    getData()
                }
            })
        }
    });
};
// ===============================>   查看
const checkformData = ref<any>({})
const checkDalog = (e: any) => {
    checkformData.value = e
    checkCenterDialogVisible.value = true
}
const pricingChangeCheck = () => {
    RequestPricingListPricingChangeCheck(checkformData.value.id).then((res: any) => {
        console.log(res);
        if (res.success == true) {
            checkCenterDialogVisible.value = false
            ElMessage.success(res.msg)
            getData()
        }
    })
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;

        .el-dialog__title {
            color: #fff;
        }

        .el-icon svg {
            color: #fff;
        }
    }

}

::v-deep .el-popper {
    max-width: 40%;
}

::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}
</style>
